<template>
  <div>
    <div class="boscard">
      <el-card class="signin" @click.native="signIn">
        <h5
          style="display: flex; justify-content: center;color: whitesmoke;margin-top: 2px"
        >
          {{ time }}
        </h5>
        <span class="cardFont">
          <i
            class="el-icon-time"
            style="margin-right: 10px;margin-top: 3px;font-size: 40px"
          ></i>
          一键签到</span
        >
        <div class="more">
          {{
            signCount === 0 ? "未签到" : `第 ${signCount} 次签到 ` + signTime
          }}
        </div>
      </el-card>

      <el-card class="leave" @click.native="leaveVisible = true;" style="margin-left: 20px">
        <!--     <h5 style="display: flex; justify-content: center;color: whitesmoke;margin-top: 2px">-->
        <!--       {{ time }} </h5>-->
        <span class="leave-font">
           <i
             class="el-icon-tickets"
             style="margin-right: 10px;margin-top: 3px;font-size: 40px"
           ></i>
          <!--         <i class="el-icon-message" style="margin-right: 10px;margin-top: 3px;font-size: 40px"></i>-->
          请假申请</span
        >
      </el-card>

      <el-card class="baoxiao" @click.native="" style="margin-left: 20px">
        <!--     <h5 style="display: flex; justify-content: center;color: whitesmoke;margin-top: 2px">-->
        <!--       {{ time }} </h5>-->
        <span class="baoxiao-font">
<!--          <i-->
<!--            class="el-icon-tickets"-->
<!--            style="margin-right: 10px;margin-top: 3px;font-size: 40px"-->
<!--          ></i>-->
          敬请期待</span
        >
      </el-card>
      <el-card class="logout" @click.native="logout" style="margin-left: 20px">
        <!--     <h5 style="display: flex; justify-content: center;color: whitesmoke;margin-top: 2px">-->
        <!--       {{ time }} </h5>-->
        <span class="logout-font">
          <i
            class="el-icon-switch-button"
            style="margin-right: 10px;margin-top: 3px;font-size: 40px"
          ></i>
          退出登录</span
        >
      </el-card>
    </div>
    <div>
      <el-card style="width: 600px; height: 400px;margin-top: 30px">
        <div id="charts" style="width: 600px; height: 400px"></div>
      </el-card>
    </div>

    <div>
      <el-dialog
        title="请假申请"
        :visible.sync="leaveVisible"
        width="30%"
        append-to-body
      >
        <div>
          <el-form
            :model="leaveParams"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="申请人" prop="adminId">
              <el-input type="text" v-model="leaveApplyName" disabled></el-input>
            </el-form-item>
            <el-form-item label="部门" prop="departmentId">
<!--              <el-input type="text" v-model="leaveApplyName" disabled></el-input>-->
              <el-select v-model="leaveParams.departmentId" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in depOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item >
            <el-form-item label="请假时间" prop="leaveDate">
              <el-date-picker
                v-model="leaveDateValue"
                type="daterange"
                @change="dateSelect"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item label="请假原因" prop="leaveReason">
              <el-input type="textarea" v-model="leaveParams.leaveReason"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="leaveVisible = false">取 消</el-button>
          <el-button type="primary" @click="leaveApply('ruleForm')">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import signAPI from "../../../api/sign";
import loginApI from "../../../api/login";
import leaveAPI from "../../../api/leave";
import employeeAPI from "../../../api/employee";
import taskAPI from "../../../api/task";
export default {
  name: "dasboard",
  data() {
    return {
      time: "",
      signTime: "",
      signCount: 0,
      onlineCount: 0,
      taskOption: {
        // title: {
        //   text: "任务完成情况"
        // },
        // tooltip: {},
        // legend: {
        //   data: ["完成任务数"]
        // },
        // xAxis: {
        //   data: []
        // },
        // yAxis: {},
        // series: [
        //   {
        //     name: "完成任务数",
        //     type: "bar",
        //     data: []
        //   }
        // ]
      },
      leaveParams: {
        adminId: JSON.parse(sessionStorage.getItem('userInfo')).id,
        departmentId: JSON.parse(sessionStorage.getItem('userInfo')).departmentId
      },
      leaveApplyName: JSON.parse(sessionStorage.getItem('userInfo')).name,
      leaveVisible: false,
      depOptions:[],
      rules: {
        // adminId:[ { required: true, message: '请输入请假原因', trigger: 'blur' }],
        departmentId:[ { required: true, message: '请选择部门', trigger: 'blur' }],
  //      leaveDate:[{ required: true,message: '请选择请假日期', trigger: 'blur' }],
        leaveReason:[ { required: true, message: '请输入请假原因', trigger: 'blur' }],
   //     adminId:[ { required: true, message: '请输入请假原因', trigger: 'blur' }],
      },
      leaveDateValue:'',
      nameCount:[],
      taskCount:[],
      hackReset:false,
    };
  },
  methods: {
    getTime() {
      let date = new Date().toLocaleDateString();
      let time = new Date().toLocaleTimeString();
      return date + " " + time;
    },
    // 签到请求
    signIn() {
      signAPI.signIn().then(res => {
        if (res) {
          if (this.signCount === 0) {
            this.signTime =
              res.data.obj.signDate + " " + res.data.obj.firstSignTime;
            this.signCount = res.data.obj.signCount;
          } else {
            this.signTime =
              res.data.obj.signDate + " " + res.data.obj.endSignTime;
            this.signCount = res.data.obj.signCount;
          }
        }
      });
    },
    // 获取个人签到数据
    getMySignInfo() {
      signAPI.getMySignInfo().then(res => {
        if (res) {
          console.log(res);
          if (
            !(res.data === "" || res.data === undefined || res.data === null)
          ) {
            this.signCount = res.data.signCount;
            if (res.data.signCount === 1) {
              this.signTime = res.data.signDate + " " + res.data.firstSignTime;
            } else {
              this.signTime = res.data.signDate + " " + res.data.endSignTime;
            }
          }
        }
      });
    },
    drawCharts() {
      let myChart = echarts.init(document.getElementById("charts"));
      // 指定图表的配置项和数据
      myChart.setOption(this.taskOption,true);
      // this.$forceUpdate()
    },
    // 退出登录
    logout() {
      loginApI.logout().then(res => {
        console.log(res);
        // 清空用户信息
        sessionStorage.removeItem("token");
        sessionStorage.removeItem("userInfo");
        // 清空菜單
        this.$store.commit("initRoutes", []);
        // 跳转路由
        this.$router.replace("/");
      });
    },
    dateSelect(){
      this.leaveParams.firstDate = this.leaveDateValue[0];
      this.leaveParams.lastDate = this.leaveDateValue[1];
    },
    // 提交请假申请
    leaveApply(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            leaveAPI.addApply(this.leaveParams).then(res => {
              if (res){
                this.leaveParams = {
                  adminId: JSON.parse(sessionStorage.getItem('userInfo')).id
                };
                this.leaveDateValue = '';
                this.leaveVisible = false;
              }
            })
            console.log(this.leaveParams);
          }})

    },
    // 获取所有部门
    getAllDeps(){
      employeeAPI.getAllDeps().then(res => {
        // this.depOptions = res.data;
        this.getDep(res.data); // 递归
      })
    },
    // 递归操作
    getDep(data){
      data.map(item => {
        this.depOptions.push(item)
        if (item.children.length === 0){
          return ;
        }
        this.getDep(item.children)
      })
    },
    taskStatistics(){
      // taskAPI
      let nameCount = []
      let taskCount = []
      taskAPI.taskStatistics().then(res => {
        if (res) {
          res.data.forEach((item, index) => {
            //   console.log(item.designeeName);
            nameCount.push(item.designeeName)
            taskCount.push(item.taskCount)
            // console.log(this.taskOption.xAxis.data);
            // console.log(this.taskOption.series[0].data);

          })

          const taskOption = {
            title: {
              text: "任务完成情况"
            },
            tooltip: {},
            legend: {
              data: ["完成任务数"]
            },
            xAxis: {
              data: nameCount
            },
            yAxis: {},
            series: [
              {
                name: "完成任务数",
                type: "bar",
                data: taskCount
              }
            ]
          }
          this.taskOption = taskOption
        }
      })
    }

  },
  created() {
    setInterval(() => {
      this.time = this.getTime();
    }, 1000);
  },
  mounted() {
    this.taskStatistics()
    this.drawCharts();
    this.getMySignInfo();
    this.getAllDeps();
  },
  beforeDestroy: function() {
    //实例销毁前清除定时器
    if (this.time) {
      clearInterval(this.time);
    }
  },
  watch: {
    taskOption(newVal, oldVal){
      console.log("22");
      console.log(newVal);
      this.drawCharts();  // mounted不刷新事件， 要监听数组变化后进行刷新
    }
  }
};
</script>

<style scoped>
.boscard {
  display: flex;
  justify-content: left;
}
.signin {
  width: 400px;
  height: 200px;
  cursor: pointer;
  background-color: #00c0ef;
}
.cardFont {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  font-size: 30px;
  text-decoration: none;
  color: white;
}
/*span:hover {*/
/*  font-size: 40px;*/
/*}*/

.signin:hover {
  transform: scale(1.1);
}
.moreduo {
  width: 400px;
  margin-top: 60px;
  display: block;
  line-height: 26px;
  background: rgba(0, 0, 0, 0.2);
  height: 26px;
  color: whitesmoke;
  text-align: center;
}
.more {
  margin-top: 50px;
  color: whitesmoke;
  text-align: center;
  background: rgba(0, 0, 0, 0.2);
  line-height: 26px;
}

.leave {
  width: 400px;
  height: 200px;
  cursor: pointer;
  background-color: #f0c78a;
}

.leave:hover {
  transform: scale(1.1);
}

.leave-font {
  display: flex;
  justify-content: center;
  margin-top: 62px;
  font-size: 30px;
  text-decoration: none;
  color: white;
}

.baoxiao {
  width: 400px;
  height: 200px;
  cursor: pointer;
  background-color: darkseagreen;
}

.baoxiao:hover {
  transform: scale(1.1);
}

.baoxiao-font {
  display: flex;
  justify-content: center;
  margin-top: 62px;
  font-size: 30px;
  text-decoration: none;
  color: white;
}

.logout {
  width: 400px;
  height: 200px;
  cursor: pointer;
  background-color: lightcoral;
}

.logout:hover {
  transform: scale(1.1);
}

.logout-font {
  display: flex;
  justify-content: center;
  margin-top: 62px;
  font-size: 30px;
  text-decoration: none;
  color: white;
}
</style>
